react-jss

What is react-jss?

react-jss is a library that allows you to use JSS (JavaScript Style Sheets) with React. It provides a way to style React components using JavaScript objects, enabling dynamic styling and theming capabilities.

What are react-jss's main functionalities?

Basic Styling

This feature allows you to define styles using JavaScript objects and apply them to React components. The `createUseStyles` function is used to create a hook that generates the necessary CSS classes.

const useStyles = createUseStyles({
  button: {
    background: 'blue',
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer'
  }
});

function MyButton() {
  const classes = useStyles();
  return <button className={classes.button}>Click Me</button>;
}

Theming

Theming allows you to define a theme object and use it to style your components. This makes it easy to apply consistent styling across your application and switch themes dynamically.

const theme = {
  primaryColor: 'blue',
  secondaryColor: 'green'
};

const useStyles = createUseStyles({
  button: {
    background: ({ theme }) => theme.primaryColor,
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer'
  }
});

function MyButton() {
  const classes = useStyles({ theme });
  return <button className={classes.button}>Click Me</button>;
}

Dynamic Styling

Dynamic styling allows you to change styles based on component props or state. This example shows how to change the button's background color based on the `isPrimary` prop.

const useStyles = createUseStyles({
  button: {
    background: ({ isPrimary }) => (isPrimary ? 'blue' : 'gray'),
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer'
  }
});

function MyButton({ isPrimary }) {
  const classes = useStyles({ isPrimary });
  return <button className={classes.button}>Click Me</button>;
}

Other packages similar to react-jss

styled-components

styled-components is a library for styling React components using tagged template literals. It allows you to write actual CSS code to style your components and supports theming and dynamic styling. Compared to react-jss, styled-components uses a different syntax and approach but offers similar capabilities.

emotion

emotion is a library designed for writing CSS styles with JavaScript. It provides both a CSS-in-JS solution and a styled-components-like API. Emotion is known for its performance and flexibility, making it a strong alternative to react-jss.

aphrodite

aphrodite is a library for styling React components using JavaScript objects. It focuses on performance and ease of use, similar to react-jss. Aphrodite generates atomic CSS classes to minimize style recalculations and reflows.

README

react-jss

JSS integration with React

See our website react-jss for more information.

Install

Using npm:

npm install react-jss

or using yarn:

yarn add react-jss

Changelog

10.10.0 (2023-2-9)

Improvements

• [jss] Added support for @container query 1637